<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../res/layui/css/layui.css">

</head>
<body>
<div class="layui-fluid">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>视频上传</legend>
        <div class="layui-field-box">
            <div class="layui-col-md6">
                <form class="layui-form layui-form-pane" lay-filter="formMusic" id="formMusic">
                    <!--表单控件项：文件上传（视频封面）-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">视频封面:</label>
                        <button class="layui-btn layui-btn-normal" type="button" id="btnImg">
                            <i class="layui-icon layui-icon-upload"></i>
                            选择文件
                        </button>
<!--                        &lt;!&ndash;播放器隐藏控件：获取总播放时长用&ndash;&gt;-->
<!--                        <audio src="" id="player" style="display: none"></audio>-->
                        <!--表单提交时提交视频封面地址-->
                        <input type="hidden" name="coverimg" id="coverimg" lay-verify="请上传视频封面">
                    </div>
                    <!--表单控件项：文件上传（视频文件）-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">视频文件:</label>
                        <button class="layui-btn layui-btn-normal" type="button" id="btnVideo" lay-verify="请上传视频文件">
                            <i class="layui-icon layui-icon-upload"></i>
                            选择文件
                        </button>
<!--                        &lt;!&ndash;播放器隐藏控件：获取总播放时长用&ndash;&gt;-->
<!--                        <audio src="" id="player" style="display: none"></audio>-->
                        <!--表单提交时提交视频地址-->
                        <input type="hidden" name="url" id="url"/>
                    </div>
                    <!-- 资源类型选择控件-->
<!--                    <div class="layui-form-item" pane>-->
<!--                        <label class="layui-form-label">资源类型:</label>-->
<!--                        <div class="layui-input-block">-->
<!--                            <input type="radio" name="musictype" value="0" title="视频" checked>-->
<!--                            <input type="radio" name="musictype" value="1" title="mv">-->
<!--                        </div>-->
<!--                    </div>-->

                    <!--视频的频道选择控件-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">视频频道:</label>
                        <div class="layui-input-block">
                            <select name="cid" id="cid">
<!--                                <option value="0">生活</option>-->
<!--                                <option value="1">游戏</option>-->
<!--                                <option value="2">动漫</option>-->

                            </select>
                        </div>
                    </div>
                    <!--表单控件项：视频频道选择-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">视频标题:</label>
                        <div class="layui-input-block">
                            <input class="layui-input" type="text" name="title" id="Videotitle" lay-verify="required"
                                   lay-verType="tips" lay-reqText="请输入视频标题">
                        </div>
                    </div>
                 <!--视频标签控件-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">视频标签:</label>
                        <div class="layui-input-block">
                            <input class="layui-input" type="text" name="tags"lay-verify="required"
                                   lay-verType="tips" lay-reqText="请输入视频标签" placeholder="多个标签请用逗号分隔">
                        </div>
                    </div>
<!--                    &lt;!&ndash;表单控件项：视频频道选择&ndash;&gt;-->
<!--                    <div class="layui-form-item">-->
<!--                        <label class="layui-form-label">风格:</label>-->
<!--                        <div class="layui-input-block">-->
<!--                            <select name="style" id="style">-->
<!--                                <option value="流行">流行</option>-->
<!--                                <option value="Rap/Hip Hop">Rap/Hip Hop</option>-->
<!--                                <option value="pop">pop</option>-->
<!--                                <option value="摇滚">摇滚</option>-->
<!--                                <option value="民谣">民谣</option>-->
<!--                                <option value="电子">电子</option>-->
<!--                                <option value="轻视频">轻视频</option>-->
<!--                                <option value="爵士">爵士</option>-->
<!--                                <option value="R&B">R&B</option>-->
<!--                                <option value="乡村">乡村</option>-->
<!--                                <option value="中国风">中国风</option>-->
<!--                                <option value="说唱">说唱</option>-->
<!--                                <option value="古典">古典</option>-->
<!--                                <option value="世界视频">世界视频</option>-->
<!--                            </select>-->
<!--                        </div>-->
<!--                    </div>-->
                    <!-- 歌词控件    -->
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">简介:</label>
                        <div class="layui-input-block">
                            <textarea name="summary" class="layui-textarea" placeholder="请填写简介内容"></textarea>
                        </div>
                    </div>
                    <!-- 提交按钮    -->
                    <div class="layui-form-item" style="text-align: right">
                        <button type="button" class="layui-btn layui-btn-warm" lay-submit  lay-filter="btnAdd">确认添加
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </fieldset>
</div>
<script src="../res/layui/layui.js"></script>

<script>
    layui.use(function () {
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery;
        //获取文件上传组件
        var upload = layui.upload;

        //查询所有类别并在下拉列表中查询
        $.ajax({
            url: "/video/categories",
            type: "get",
            success: function (resp){
                var html = "";
                $.each(resp.data, function (i, item){
                    html += "<option value='" + item.id +"'>" + item.name + "</option>";
                })
            $("#cid").html(html);
            form.render("select");
            }
        })

        //封面上传
        upload.render({
            elem: '#btnImg',   //绑定按钮
            url: '/video/upload',
            field: 'file',
            accept: 'image',  //文件类型
            acceptMime: 'image/*',
            done: function (res){
                if (res.code === 0){
                    console
                    $("#coverimg").val(res.data);
                    layer.msg("上传成功");
                }else {
                    layer.msg("上传失败");
                }
            }
        })


        //视频上传
        upload.render({
            elem: '#btnVideo',   //绑定按钮
            url: '/video/upload',
            field: 'file',
            accept: 'video',  //文件类型
            acceptMime: 'video/webm,video/ogg,video/mp4,video/avi,video/mkv',
            //显示视频上传加载动画
            before: function (){
                layer.load(2);
            },
            //关闭动画
            done: function (res){
                layer.closeAll("loading");
                if (res.code === 0){
                    console
                    $("#url").val(res.data);
                    layer.msg("上传成功");
                }else {
                    layer.msg("上传失败");
                }
            }
        })
        //为表单绑定提交事件
        form.on('submit(btnAdd)', function (data) {
            //获取表单数据
            let formData = data.field;
            $.ajax({
                url: '/video/add',
                type: 'post',
                data: formData,
                success: function (resp) {
                    if (resp.code === 0) {
                        //提示成功信息
                        layer.msg(resp.msg, {icon: 1},function () {
                            //关闭当前窗口
                            layer.closeAll('iframe')
                            //刷新父窗口
                            parent.location.reload()
                        })
                    } else {
                        //提示失败信息
                        layer.msg(resp.msg, {icon: 2})
                    }
                }
            })
        })

    })
</script>
</body>
</html>